import 'package:flutter/material.dart';

class MyLEDApp extends StatelessWidget {

  const MyLEDApp({super.key});

    @override
    Widget build(BuildContext context) {
        return Center(
                child: LEDText(
                text: 'HelloWorld',
                fontSize: 108,
                particleColor: Colors.red,
          ),
        );
    }
}

class LEDText extends StatefulWidget {
    final String text;
    final double fontSize;
    final Color particleColor;

    LEDText({
        required this.text,
                required this.fontSize,
                required this.particleColor,
    });

    @override
    _LEDTextState createState() => _LEDTextState();
}

class _LEDTextState extends State<LEDText> with SingleTickerProviderStateMixin {
    late AnimationController _controller;
    late Animation<Offset> _animation;

    @override
    void initState() {
        super.initState();

        _controller = AnimationController(
                duration: const Duration(seconds: 5),
        vsync: this,
    )..repeat(reverse: true);

        _animation = Tween<Offset>(
                begin: Offset(-0.2, 0),
                end: Offset(1, 0),
    ).animate(CurvedAnimation(
                parent: _controller,
                curve: Curves.ease,
    ));
    }

    @override
    void dispose() {
        _controller.dispose();
        super.dispose();
    }

    @override
    Widget build(BuildContext context) {
        return Container(
                width: double.infinity,
                height: widget.fontSize * 2, // Adjust as needed
                child: ClipRect(
                child: Row(
                children: [
        SlideTransition(
                position: _animation,
                child: Stack(
                children: List.generate(widget.text.length, (index) {
        return Padding(
                //alignment: Alignment.center,
                //margin: const EdgeInsets.only(top: 20.0),
                //padding: const EdgeInsets.all(),
                padding: EdgeInsets.only(bottom: 0.0, top:0.0,left: 108.0*(index+1), right: 0.0),
                child: Container(
                width: widget.fontSize,
                height: widget.fontSize,
                decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: widget.particleColor,
                      ),
        child: Center(
                child: Text(
                widget.text[index],
                style: TextStyle(
                color: Colors.white,
                fontSize: widget.fontSize * 0.8,
                fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                    ),
                  );
                }),
              ),
            ),
          ],
        ),
      ),
    );
    }
}